<template>
  <!-- 基本信息 -->
  <view class="card">
    <uni-section title="法定代表人信息" type="line">
      <view class="formItem">
        <view class="label">姓名</view>
        <input class="content" v-model="forms.personName" placeholder="请输入姓名" />
      </view>

      <view class="formItem">
        <view class="label">证件类型</view>
        <picker mode="selector" class="content" :range="idcardTypeList" range-key="label"
          @change="idcardTypeChange($event)">
          <view :style="{ color: showIdcardType ? '#333' : '#999' }">{{ showIdcardType || '请选择单位类别' }}</view>
        </picker>
      </view>

      <view class="formItem">
        <view class="label">证件号码</view>
        <input class="content" v-model="forms.idcard" placeholder="请输入证件号码" @blur="checkIdcard()" />
      </view>

      <view class="formItem">
        <view class="label">手机号码</view>
        <input class="content" v-model="forms.phone" placeholder="请输入手机号码" @blur="checkPhone()" />
      </view>

      <view class="formItem_doubleRow">
        <view class="title">身份证人像面
          <view class="titleTip">(必须使用身份证原件拍摄不得使用已有身份证图像替代)</view>
        </view>
        <image mode="widthFix" style="width:240rpx;height:240rpx"
          :src="forms.positivePhoto ? baseApiUrl + forms.positivePhoto : baseImgUrl + '/camera/outline_card.png'"
          @click="toPhotoCatch('portrait', 'positivePhoto')" />
        <view class="cu-tag bg-red" style="position: absolute;padding: 3px 6px;height: auto;margin-left:-48rpx"
          @tap.stop="DelImg($event, 'positivePhoto')" v-show="forms.positivePhoto"><text class="cuIcon-close"></text>
        </view>
      </view>

      <view class="formItem_doubleRow">
        <view class="title">身份证国徽面
          <view class="titleTip">(必须使用身份证原件拍摄不得使用已有身份证图像替代)</view>
        </view>
        <image mode="widthFix" style="width:240rpx;height:240rpx" @click="toPhotoCatch('emblem', 'backPhoto')"
          :src="forms.backPhoto ? baseApiUrl + forms.backPhoto : baseImgUrl + '/camera/outline_card.png'" />
        <view class="cu-tag bg-red" style="position: absolute;padding: 3px 6px;height: auto;margin-left:-48rpx"
          @tap.stop="DelImg($event, 'backPhoto')" v-show="forms.backPhoto"><text class="cuIcon-close"></text></view>
      </view>
    </uni-section>
  </view>
</template>
<script>
import { baseImgUrl, baseApiUrl } from '@/config.js';
import { checkIDCardTools, checkPhoneTools } from '@/utils/tools.js';
import { mapState } from 'vuex';
export default {
  name: 'stepOne',
  computed: {
    ...mapState(['login'])
  },
  data() {
    return {
      flag: false, // 防抖
      baseImgUrl: baseImgUrl,
      baseApiUrl: baseApiUrl,
      forms: {
        personName: '', // 姓名
        idcardType: '', // 证件类型
        idcard: '', // 证件号码
        phone: '', // 手机号码
        // image: '', // 人像照片
        positivePhoto: '', // 身份证人像面
        backPhoto: '', // 身份证 国徽面
      },
      // 证件类型回显
      showIdcardType: '',
      // 证件类型
      idcardTypeList: [
        {
          label: '居民身份证',
          value: '1'
        },
        {
          label: '外国护照',
          value: '2'
        },
        {
          label: '港澳居民居住证',
          value: '3'
        },
        {
          label: '台湾居民居住证',
          value: '4'
        }
      ],
    }
  },
  watch: {
    'login.form': {
      handler(val) {
        for (let key in val) {
          if (val[key] != '' && val[key] != null) {
            this.$set(this.forms, key, val)
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 身份证校验
    checkIdcard() {
      return checkIDCardTools(this.forms.idcard, "请输入正确的身份证")
    },
    // 手机号校验
    checkPhone() {
      return checkPhoneTools(this.forms.phone, "请输入正确的手机号")
    },
    // 确定
    idcardTypeChange(e) {
      this.forms.idcardType = this.idcardTypeList[e.detail.value].value
      this.showIdcardType = this.idcardTypeList[e.detail.value].label
    },
    // 删除图片
    DelImg(e, label) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '去掉',
        success: res => {
          if (res.confirm) {
            this.forms[label] = ''
          }
        }
      });
    },
    //! 跳往拍照页面
    toPhotoCatch(type, label) {
      // 防止重复点击
      if (!this.flag) {
        this.flag = true;
        uni.navigateTo({
          url: '/pages/login/components/photoCatch?photoType=' + type + '&label=' + label,
          success: () => {
            this.flag = false;
          }
        })
      } else {
        this.$showToast({
          show: true,
          text: '正在前往拍照页面，请稍后'
        });
      }
    },
    //! 提供给父组件的校验方法，错误时返回表单名
    validateForm() {
      let result = true

      // 再校验一遍 电话号码和身份证
      if (this.checkPhone() && this.checkIdcard()) {
        // 如果表单字段为空时则返回校验失败
        for (const key in this.forms) {
          if (this.forms[key] === '') {
            result = '法定代表人信息、'
            break
          }
        }
      } else {
        result = '法定代表人信息、'
      }

      return result
    },
    // 返回一个弹窗
    errorTip(msg, title = '提示') {
      uni.showToast({
        title: msg,
        icon: "none",
        duration: '2000'
      });
    }
  }
}
</script>